//导入react和react-dom
// react负责创建元素-虚拟的Dom
import React from 'react';
// reactDOM负责渲染react元素
import ReactDOM from 'react-dom';
// 样式
import './index.css';

// 课堂练习
const list = [
  { id: 1, name: '刘德华', content: '给我一杯忘情水' },
  { id: 2, name: '五月天', content: '不打扰，是我的温柔' },
  { id: 3, name: '毛不易', content: '像我这样优秀的人' },
];

const test = (
  <div>
    {/* 三元表达式判断有没有数据 */}
    {list.length ? (
      <ul className="list">
        {list.map((item) => {
          return (
            <li key={item.id}>
              <h3>评论人：{item.name}</h3>
              <p>评论内容：{item.content}</p>
            </li>
          );
        })}
      </ul>
    ) : (
      <div>暂无数据</div>
    )}
  </div>
);
// 渲染元素到页面
// 语法：ReactDOM.render（react元素，真实的dom作为挂载点）
ReactDOM.render(test, document.getElementById('root'));
